<template>
	<view class="selectPersonInfo">
		<!-- 背景图 -->
		<view class="selectPersonInfo-bj">
			<image src="https://static.haiqigame.com/uploads/20251013/d4fbf38e9ea926caf04aea92efb08a02.jpg" mode="widthFix"></image>
		</view>
		
		<view class="userInfo">
			<view class="userImage">
				<view class="images">
					<image src="https://foruda.gitee.com/avatar/1735095903371135404/7496676_fu_yushun_1735095903.png!avatar200" mode="widthFix" style="border-radius: 50%;"></image>
				</view>
			</view>
			
			<view class="userName">
				<view class="names">
					HH菜菜
				</view>
				<view class="sex">
					未知
				</view>
			</view>
			
			<view class="uid">
				UID:123123
			</view>
			
			<view class="des">
				详情详情详情详情详情详情详情
			</view>
			
			<view class="option">
				<view class="user-yy">
					播放语音留言<uni-icons type="sound-filled" size="14"></uni-icons>
				</view>
				
				<view class="user-btn">
					找ta一起玩
				</view>
			</view>
			
			<view class="option-data">
				<view class="option-data-item">
					<view class="nums">
						0
					</view>
					<view class="tit">
						加入天数
					</view>
				</view>
				
				<view class="option-data-item">
					<view class="nums">
						0
					</view>
					<view class="tit">
						总单量
					</view>
				</view>
				
				<view class="option-data-item">
					<view class="nums">
						0
					</view>
					<view class="tit">
						好评数
					</view>
				</view>
			</view>
		</view>
		
		<!-- 照片墙 -->
		<view class="pictureBox">
			<view class="titBox">
				风采展示
			</view>
			<view class="pictureList">
				<view class="pictureItem" v-for="item in 4">
					<image src="https://foruda.gitee.com/avatar/1735095903371135404/7496676_fu_yushun_1735095903.png!avatar200" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<!-- 伙伴战绩 -->
		<view class="pictureBox">
			<view class="titBox">
				伙伴战绩
			</view>
			<view class="recordContent">
				伙伴战绩伙伴战绩伙伴战绩伙伴战绩伙伴战绩伙伴战绩伙伴战绩伙伴战绩
			</view>
		</view>
		
		<view class="footer-btn">
			<view class="btn">
				戳我立即下单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.selectPersonInfo{
		.selectPersonInfo-bj{
			width: 100%;
			height: 400rpx;
		}
		
		.userInfo{
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx;
			.userImage{
				display: flex;
				justify-content: center;
				position: relative;
				.images{
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					background-color: #fff;
					box-sizing: border-box;
					padding: 15rpx;
					position: absolute;
					left: 50%;
					top: -120rpx;
					transform: translateX(-50%);
				}
			}
			
			.userName{
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 90rpx;
				.names{
					font-size: 32rpx;
					font-weight: 700;
					margin-right: 10rpx;
				}
			}
			
			.uid{
				text-align: center;
				font-size: 12px;
				color: #999;
				margin: 15rpx 0;
			}
			
			.des{
				text-align: center;
				font-size: 13px;
				color: #999;
			}
			
			.option{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font-size: 26rpx;
				.user-yy{
					color: red;
					border: 1px red solid;
					margin-right: 20rpx;
					padding: 2px 30rpx;
					border-radius: 40rpx;
				}
				.user-btn{
					background-color: red;
					color: #fff;
					padding: 2px 30rpx;
					border-radius: 40rpx;
				}
			}
			
			.option-data{
				display: flex;
				align-items: center;
				.option-data-item{
					flex: 1;
					text-align: center;
					.nums{
						color: red;
						font-size: 28rpx;
						font-weight: 700;
						margin-bottom: 8rpx;
					}
					.tit{
						font-size: 24rpx;
						color: #555;
					}
				}
			}
		}
		
		.pictureBox{
			background-color: #fff;
			margin-top: 20rpx;
			.pictureList{
				box-sizing: border-box;
				padding:20rpx;
				padding-top: 0px;
				display: flex;
				align-items: center;
				gap: 10px;
				.pictureItem{
					width: 120rpx;
					height: 160rpx;
					border-radius: 4px;
					overflow: hidden;
					
				}
			}
			
			.recordContent{
				box-sizing: border-box;
				padding: 30rpx;
				padding-top: 0px;
				font-size: 24rpx;
				color: #777;
			}
		}
	}
	
	.titBox{
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		padding: 0px 20rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
	
	.footer-btn{
		position: fixed;
		bottom: 0px;
		left: 0px;
		box-sizing: border-box;
		padding: 30rpx;
		width: 100%;
		background-color: #fff;
		.btn{
			background-color: red;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 4px;
			color: #fff;
		}
	}
</style>
